<template>
  <div class="variety-show-container">
    <!-- 头部banner -->
    <div class="variety-banner">
      <div class="banner-overlay"></div>
      <div class="banner-content">
        <h1 class="banner-title">热门综艺</h1>
        <p class="banner-subtitle">发现精彩综艺节目，享受娱乐时光</p>
      </div>
    </div>

    <!-- 内容分类标签 -->
    <div class="variety-categories">
      <button 
        v-for="category in categories" 
        :key="category.id"
        class="category-tab"
        :class="{ active: activeCategory === category.id }"
        @click="activeCategory = category.id"
      >
        {{ category.name }}
      </button>
    </div>

    <!-- 热门推荐 -->
    <div class="hot-variety-section">
      <div class="section-header">
        <h2>热门推荐</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="featured-variety">
        <div class="variety-cover-container">
          <img :src="featuredVariety.image" :alt="featuredVariety.title" class="variety-cover-featured">
          <div class="cover-overlay">
            <button class="play-btn-featured">
              <i class="fa fa-play"></i>
            </button>
          </div>
          <div class="rating-badge-featured">{{ featuredVariety.rating }}</div>
        </div>
        <div class="variety-info-featured">
          <h3 class="variety-title-featured">{{ featuredVariety.title }}</h3>
          <p class="variety-subtitle-featured">{{ featuredVariety.subtitle }}</p>
          <div class="variety-meta-featured">
            <span class="meta-item">{{ featuredVariety.channel }}</span>
            <span class="meta-item">{{ featuredVariety.year }}</span>
            <span class="meta-item">{{ featuredVariety.episodes }}集全</span>
          </div>
          <div class="variety-tags-featured">
            <span 
              v-for="tag in featuredVariety.tags" 
              :key="tag"
              class="tag-item"
            >
              {{ tag }}
            </span>
          </div>
          <p class="variety-description-featured">{{ featuredVariety.description }}</p>
          <div class="variety-actions-featured">
            <button class="action-btn play-btn">
              <i class="fa fa-play-circle"></i> 播放
            </button>
            <button class="action-btn favorite-btn">
              <i class="fa fa-heart-o"></i> 收藏
            </button>
            <button class="action-btn share-btn">
              <i class="fa fa-share-alt"></i> 分享
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近更新 -->
    <div class="latest-updates-section">
      <div class="section-header">
        <h2>最近更新</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="variety-list">
        <div 
          v-for="variety in latestUpdates" 
          :key="variety.id"
          class="variety-item"
        >
          <div class="variety-cover-wrapper">
            <img :src="variety.image" :alt="variety.title" class="variety-cover">
            <div class="play-icon">
              <i class="fa fa-play"></i>
            </div>
            <div class="episode-badge">{{ variety.latestEpisode }}</div>
          </div>
          <div class="variety-info">
            <h3 class="variety-title">{{ variety.title }}</h3>
            <p class="variety-subtitle">{{ variety.subtitle }}</p>
            <div class="variety-meta">
              <span class="meta-item">{{ variety.channel }}</span>
              <span class="meta-item">{{ variety.updateTime }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 精选专题 -->
    <div class="featured-topics-section">
      <div class="section-header">
        <h2>精选专题</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="topics-grid">
        <div 
          v-for="topic in featuredTopics" 
          :key="topic.id"
          class="topic-card"
        >
          <div class="topic-image-wrapper">
            <img :src="topic.image" :alt="topic.title" class="topic-image">
            <div class="topic-overlay"></div>
            <div class="topic-content">
              <h3 class="topic-title">{{ topic.title }}</h3>
              <p class="topic-count">{{ topic.count }}部作品</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 人气榜单 -->
    <div class="popular-ranking-section">
      <div class="section-header">
        <h2>人气榜单</h2>
        <a href="#" class="more-link">查看全部 <i class="fa fa-angle-right"></i></a>
      </div>
      <div class="ranking-list">
        <div 
          v-for="(variety, index) in popularRankings" 
          :key="variety.id"
          class="ranking-item"
        >
          <div class="ranking-number" :class="getRankingClass(index)">
            {{ index + 1 }}
          </div>
          <div class="variety-cover-wrapper-small">
            <img :src="variety.image" :alt="variety.title" class="variety-cover-small">
          </div>
          <div class="variety-info-small">
            <h3 class="variety-title-small">{{ variety.title }}</h3>
            <p class="variety-subtitle-small">{{ variety.subtitle }}</p>
          </div>
          <div class="variety-stats-small">
            <span class="rating">{{ variety.rating }}</span>
            <span class="views">{{ variety.views }}万观看</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VarietyShowView',
  data() {
    return {
      activeCategory: 1,
      categories: [
        { id: 1, name: '全部' },
        { id: 2, name: '真人秀' },
        { id: 3, name: '脱口秀' },
        { id: 4, name: '音乐' },
        { id: 5, name: '舞蹈' },
        { id: 6, name: '竞技' },
        { id: 7, name: '访谈' },
        { id: 8, name: '美食' },
      ],
      logoImage: '/src/assets/logo.png',
      featuredVariety: {
        title: '王牌对王牌 第八季',
        subtitle: '沈腾、贾玲、华晨宇、关晓彤领衔',
        image: '/src/assets/logo.png',
        rating: 9.2,
        channel: '浙江卫视',
        year: 2024,
        episodes: 12,
        tags: ['真人秀', '游戏', '明星'],
        description: '王牌对王牌是一档大型原创室内竞技真人秀节目，由沈腾、贾玲、华晨宇、关晓彤组成固定MC团队，每期邀请不同的嘉宾进行游戏竞技，带来欢乐与感动。',
        latestEpisode: '第10期 喜剧人特辑',
        updateTime: '每周五更新',
      },
      
      // 最新更新
      latestUpdates: [
        {
          id: 101,
          title: '向往的生活 第八季',
          subtitle: '黄磊、何炅领衔',
          image: '/src/assets/logo.png',
          channel: '湖南卫视',
          episode: '第8期',
          latestEpisode: '第8期 田园生活',
          views: 3250,
          favorites: 1890,
          updateTime: '每周六更新',
        },
        {
          id: 102,
          title: '奔跑吧 第八季',
          subtitle: '李晨、杨颖、郑恺领衔',
          image: '/src/assets/logo.png',
          channel: '浙江卫视',
          episode: '第6期',
          latestEpisode: '第6期 城市追击战',
          views: 2890,
          favorites: 1680,
          updateTime: '每周日更新',
        },
        {
          id: 103,
          title: '中国好声音 第十三季',
          subtitle: '周杰伦、李荣浩、梁静茹、李克勤',
          image: '/src/assets/logo.png',
          channel: '浙江卫视',
          episode: '第4期',
          latestEpisode: '第4期 盲选继续',
          views: 2650,
          favorites: 1450,
          updateTime: '每周五更新',
        },
        {
          id: 104,
          title: '乘风破浪的姐姐 第四季',
          subtitle: '30+女性艺人竞演节目',
          image: '/src/assets/logo.png',
          channel: '芒果TV',
          episode: '第3期',
          latestEpisode: '第3期 一公舞台',
          views: 3450,
          favorites: 2100,
          updateTime: '每周四、五更新',
        },
      ],
      
      // 精选专题
      featuredTopics: [
        {
          id: 201,
          title: '明星真人秀精选',
          image: '/src/assets/logo.png',
          count: 25,
        },
        {
          id: 202,
          title: '音乐综艺大合集',
          image: '/src/assets/logo.png',
          count: 20,
        },
        {
          id: 203,
          title: '搞笑脱口秀',
          image: '/src/assets/logo.png',
          count: 18,
        },
        {
          id: 204,
          title: '美食综艺推荐',
          image: '/src/assets/logo.png',
          count: 15,
        },
      ],
      
      // 人气榜单
      popularRankings: [
        {
          id: 301,
          title: '极限挑战 第十季',
          subtitle: '黄渤、孙红雷、黄磊回归',
          image: '/src/assets/logo.png',
          rating: 9.5,
          views: 4520,
        },
        {
          id: 302,
          title: '这！就是街舞 第六季',
          subtitle: '王一博、韩庚、刘宪华、张艺兴',
          image: '/src/assets/logo.png',
          rating: 9.3,
          views: 3890,
        },
        {
          id: 303,
          title: '密室大逃脱 第六季',
          subtitle: '杨幂、大张伟、黄明昊',
          image: '/src/assets/logo.png',
          rating: 9.1,
          views: 3450,
        },
        {
          id: 304,
          title: '吐槽大会 第八季',
          subtitle: '李诞主持',
          image: '/src/assets/logo.png',
          rating: 8.9,
          views: 3210,
        },
        {
          id: 305,
          title: '青春有你 第四季',
          subtitle: '偶像练习生',
          image: '/src/assets/logo.png',
          rating: 8.8,
          views: 3050,
        },
      ],
    }
  },
  methods: {
    getRankingClass(index) {
      if (index === 0) return 'gold'
      if (index === 1) return 'silver'
      if (index === 2) return 'bronze'
      return ''
    },
  },
}
</script>

<style scoped>
/* 综艺页面容器 */
.variety-show-container {
  min-height: 100vh;
  background-color: #f0f7ff;
  padding-bottom: 50px;
}

/* 头部banner */
.variety-banner {
  position: relative;
  height: 450px;
  background-image: url('/src/assets/logo.png');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}

.banner-content {
  position: relative;
  text-align: center;
  color: white;
}

.banner-title {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 16px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.banner-subtitle {
  font-size: 20px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 内容分类标签 */
.variety-categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  background-color: white;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.category-tab {
  padding: 8px 20px;
  border: 1px solid #e0e0e0;
  background-color: white;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.category-tab:hover {
  background-color: #f0f0f0;
  border-color: #1e90ff;
  color: #1e90ff;
}

.category-tab.active {
  background-color: #1e90ff;
  color: white;
  border-color: #1e90ff;
}

/* 通用区块样式 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 20px;
}

.section-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.more-link {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.more-link:hover {
  color: #1e90ff;
}

.more-link i {
  margin-left: 4px;
}

/* 热门推荐 */
.hot-variety-section {
  margin-bottom: 40px;
}

.featured-variety {
  display: flex;
  gap: 24px;
  background-color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 0 20px;
}

.variety-cover-container {
  position: relative;
  width: 400px;
  height: 225px;
  flex-shrink: 0;
}

.variety-cover-featured {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.variety-cover-container:hover .cover-overlay {
  opacity: 1;
}

.play-btn-featured {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(30, 144, 255, 0.9);
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-btn-featured:hover {
  transform: scale(1.1);
  background-color: rgba(30, 144, 255, 1);
}

.rating-badge-featured {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: rgba(255, 165, 0, 0.9);
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
}

.variety-info-featured {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.variety-title-featured {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  color: #333;
}

.variety-subtitle-featured {
  font-size: 16px;
  color: #666;
  margin-bottom: 12px;
}

.variety-meta-featured {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #999;
}

.variety-tags-featured {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.tag-item {
  padding: 4px 12px;
  background-color: #f0f7ff;
  color: #1e90ff;
  border-radius: 12px;
  font-size: 12px;
}

.variety-description-featured {
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
}

.variety-actions-featured {
  display: flex;
  gap: 16px;
}

.action-btn {
  padding: 8px 24px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.play-btn {
  background-color: #1e90ff;
  color: white;
}

.play-btn:hover {
  background-color: #0066cc;
}

.favorite-btn, .share-btn {
  background-color: #f0f0f0;
  color: #666;
}

.favorite-btn:hover, .share-btn:hover {
  background-color: #e0e0e0;
}

/* 最近更新 */
.latest-updates-section {
  margin-bottom: 40px;
}

.variety-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

.variety-item {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.variety-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.variety-cover-wrapper {
  position: relative;
  height: 168px;
}

.variety-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.variety-item:hover .play-icon {
  opacity: 1;
}

.episode-badge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0,0,0,0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.variety-info {
  padding: 16px;
}

.variety-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.variety-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.variety-meta {
  font-size: 12px;
  color: #999;
  display: flex;
  justify-content: space-between;
}

/* 精选专题 */
.featured-topics-section {
  margin-bottom: 40px;
}

.topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 0 20px;
}

.topic-card {
  position: relative;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.topic-card:hover {
  transform: translateY(-4px);
}

.topic-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.topic-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topic-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}

.topic-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  color: white;
}

.topic-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.topic-count {
  font-size: 12px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 人气榜单 */
.popular-ranking-section {
  margin-bottom: 40px;
}

.ranking-list {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin: 0 20px;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.3s ease;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-item:hover {
  background-color: #fafafa;
}

.ranking-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: #999;
  margin-right: 16px;
}

.ranking-number.gold {
  color: #ffd700;
}

.ranking-number.silver {
  color: #c0c0c0;
}

.ranking-number.bronze {
  color: #cd7f32;
}

.variety-cover-wrapper-small {
  width: 64px;
  height: 36px;
  margin-right: 16px;
  flex-shrink: 0;
}

.variety-cover-small {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.variety-info-small {
  flex: 1;
  min-width: 0;
}

.variety-title-small {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
}

.variety-subtitle-small {
  font-size: 12px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.variety-stats-small {
  text-align: right;
  min-width: 120px;
}

.rating {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #ff6b6b;
  margin-bottom: 4px;
}

.views {
  font-size: 12px;
  color: #999;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .featured-variety {
    flex-direction: column;
    margin: 0 12px;
  }
  
  .variety-cover-container {
    width: 100%;
    height: 200px;
  }
  
  .variety-list, .topics-grid {
    padding: 0 12px;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
  
  .ranking-list {
    margin: 0 12px;
  }
  
  .banner-title {
    font-size: 36px;
  }
  
  .banner-subtitle {
    font-size: 16px;
  }
}
</style>